<!-- 导入代报名名单 -->
<template>
  <div>
    <a-modal :maskClosable="false" centered :width="620" v-model="visible" :footer="null">
      <template slot="title">
        <div class="disFlxJS _mr-50">
          <div>{{ title }}<span class="fz-10 _pl-10" style="color:#666;">(可把文件拖入指定区域,完成上传)</span></div>
          <a-button class="fz-12" size="small" type="primary" @click="handleDownloadTemp">下载导入模板</a-button>
        </div>
      </template>
      
      <a-alert
        v-if="activityInfo.activityType === 'other_join' && activityInfo.enrollVerify === 1"
        message="当前活动已开启报名审核，本次新增报名需要活动发布方审核通过后才报名成功。"
        banner
        style="margin-top: -15px;margin-bottom: 10px;"
      />
      <a-spin :spinning="loading || dwDisabled">
        <div class="hoverBox">
          <UploadFile @upload="uploadSuccess">
            <div style="width: 550px;height: 170px;" class="disFlxCC">
              <a-icon type="upload" class="fz-30 text" />
              <div class="fw-6 _pt-10 fz-15 text">上传导入文件</div>
              <div class="fz-12 _pt-10 text">导入需先下载导入模板,且按模板中说明及要求进行规范填写</div>
              <div class="fz-12 _pt-5 text">上传按模板规范填写后的文件,系统会自动进行批量{{ title }}</div>
            </div>
          </UploadFile>
        </div>
      </a-spin>
    </a-modal>

    <TaskNotification ref="TaskNotification" />
  </div>
</template>

<script>
import UploadFile from '@/components/UploadFile/excel.vue'
import { exportActivityTemplate, syncActivityImportExcel } from '@/api/activity/activity'
import TaskNotification from '@/components/tools/TaskNotification'

export default {
  props: {
    title: {
      type: String,
      default: '导入代报名名单'
    },
    // 活动ID
    activityId: {
      type: Number | String
    },
    activityInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    UploadFile,
    TaskNotification
  },
  data() {
    return {
      visible: false,
      loading: false
    }
  },
  computed: {
    // 按钮是否禁用-判断当前页面是否存在未完成任务
    dwDisabled() {
      const _currentDW = this.$store.state.app.taskQueuesList.find(v => v.fullPath === this.$route.fullPath)
      return !!_currentDW
    }
  },
  watch: {
    dwDisabled(nval, oval) {
      if (oval && !nval) {
        // 当前页面任务结束,刷新
        this.$emit('success')
      }
    }
  },
  methods: {
    moduleShow() {
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    async handleDownloadTemp() {
      await exportActivityTemplate(this.activityId)
    },
    async uploadSuccess(form) {
      this.loading = true
      form.append('fullPath', this.$route.fullPath)
      syncActivityImportExcel(form, this.activityId)
        .then(res => {
          this.visible = false
          const { data } = res
          this.$refs.TaskNotification.toggleTask(data)
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
